<template>
 <div class="home-page">
      <div class="content-box">
         <!-- 希望通过路径来显示不同的虚拟页面,router-view中显示的是子页面的内容 -->
         <router-view></router-view>
      </div>
      <div class="tab-bar" >
         <!-- v-bind:to作用是跳转到当前目录下的子目录页面去-->
         <router-link v-bind:to="{name:'movie'}" active-class="selected">
            <span class="iconfont  icon-dianyingpiaoiocn" ></span>
            电影
         </router-link>
          <router-link v-bind:to="{name:'hall'}" active-class="selected">
            <span class="iconfont  icon-yingyuan"></span>
            影厅
         </router-link>
         <router-link v-bind:to="{name:'plan'}" active-class="selected">
            <span class="iconfont  icon-shijianbiao"></span>
            排片
         </router-link>
         <router-link v-bind:to="{name:'my'}" active-class="selected">
            <span class="iconfont  icon-wode"></span>
            我的
         </router-link>
   
      </div>
   </div>
</template>

<script>

</script>

<style>
.home-page {
   width: 100%;
   height: 100%;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
}

.content-box {
   flex: 1;
   /* 只要使用flex=1就必须要设置overflow=auto */
   overflow: auto;
}

.tab-bar {
   height: 55px;
   border-top: 1px solid lightgray;
   box-shadow: 0px -5px 10px;
   display: flex;
   justify-content: space-around;
}
.tab-bar > a{
   width: 55px;
   display: flex;
   flex-direction: column;
   font-size: 12px;
   align-items: center;
   justify-content: center;
   text-decoration: none;
   color: black;
}
.tab-bar > a > .iconfont{
   font-size: 28px;
}

/* tabbar被选中后的颜色 */
.selected{
   color: tomato !important;
}
</style>